import React from 'react';
import moment from 'moment';
import api from 'js/api/index';
import { List } from 'antd-mobile';
import { SelectDate, SelectDateComponent } from 'views/component/selectDate/selectDate';
import SelectTitle from 'views/component/selectTitle/selectTitle';
import { SubViewLink } from 'views/component/subViewLink/subViewLink';
import echarts from 'js/lib/echarts';
import TableBox from 'views/component/table/table';
import InfiniteScroll from 'react-infinite-scroller';
import { i18n } from 'js/core/i18n';

import './storeAnalysis.scss';
const heads = [i18n.get('店铺名称'), i18n.get('总得分'), i18n.get('最高类别/得分'), i18n.get('最低类别/得分')];
let pagesize = 10;

class StoreAnalysis extends React.Component {
  constructor() {
    super()
    this.query = {
      DataTypeID: null,
      datetype: 0,
      start: moment().add(-100, 'days').format('YYYY-MM-DD'),
      end: moment().format('YYYY-MM-DD'),
      toptype: 1,
      pageindex: 0,
      pagesize: pagesize,
    }
    this.state = {
      start: moment().add(-100, 'days').format('YYYY-MM-DD'),
      end: moment().format('YYYY-MM-DD'),
      dataType: null,
      hasMore: true,
      toptype: 1,
      data: []
    }
  }
  componentDidMount() {
    this.CheckReport();
  }
  CheckReport = () => {
    api('/Monitoring/CheckReport', this.query).then((data) => {
      this.setChart(data.data.Pie.dataChart)
    });
  }
  dataTypeOnChange = (dataType) => {
    this.query.pageindex = 1;
    this.query.DataTypeID = dataType.DataTypeID;
    this.setState({ dataType: dataType, data: [], hasMore: true })
    this.CheckReport();
  }
  complete = (begin_date, end_date) => {
    this.setState({
      start: begin_date,
      end: end_date,
    })
  }
  setChart = (data) => {
    for (let i = 0; i < data.length; i++) {
      data[i].value = Number(data[i].value)
    }
    let option = { textStyle: { fontSize:window.chatFontSize },
      grid: {
        top: '0%',
        height: '90%'
      },
      series: [
        {
          type: 'pie',
          radius: '55%',
          center: ['50%', '45%'],
          data: data,
        }
      ]
    }
    this.chart = echarts.init(this.refs.chart);
    this.chart.setOption(option);
  }
  loadMore = () => {
    if (this.state.hasMore) {
      api('/Monitoring/CheckReport', this.query).then((data) => {
        this.query.pageindex += 1;
        this.state.data = this.state.data.concat(data.data.datalist);
        if (data.data.datalist.length < pagesize) {
          this.setState({ data: this.state.data, hasMore: false })
        } else {
          this.setState({ data: this.state.data })
        }
      });
    }
  }
  topTypeOnChange = (type) => {
    this.query.toptype = type;
    this.query.pageindex += 1;
    this.setState({ toptype: type, data: [], hasMore: true })
  }
  dateOnChange = (value) => {
    this.query.start = value[0];
    this.query.end = value[1];
    this.setState({ start: value[0], end: value[1], data: [], hasMore: true })
    this.CheckReport();
  }
  render() {
    let { data, start, end, dataType, hasMore, toptype } = this.state;
    return <div id="storeAnalysis" className="flex-col">
      <div className="device-container">
        <List className="picker-list mb20">
          <div className="deviceItem device-border flex-vcenter">
            <SelectTitle classStyle="name">{i18n.get('实体名称')}</SelectTitle>
            <SubViewLink moduleName="selectDataTypeId" className="flex-g-1 text-right deviceItemContent" title={i18n.get('选择实体')} modelData={{ onChange: this.dataTypeOnChange }}>
              {dataType ? dataType.Name : <div style={{ color: '#909090' }}>{i18n.get('选择实体')}</div>}
            </SubViewLink>
          </div>
          <SelectDateComponent className="deviceItem device-border flex-vcenter" value={[start, end]} onChange={(value) => { this.dateOnChange(value) }}>
            <SelectTitle classStyle="add-group">{i18n.get('时段选择')}</SelectTitle>
            <div className="flex-g-1 text-right deviceItemContent">
              {start}-{end}
            </div>
          </SelectDateComponent>
          <div className="itemLine flex-vcenter">
            <SelectTitle classStyle="store">{i18n.get('店铺得分分布')}</SelectTitle>
          </div>
          <div className="chart" ref="chart"></div>
        </List>
      </div>
      <div className="toptypeBox flex-center">
        <div className={"toptypeItem flex-g-1" + (toptype === 1 ? ' select' : '')} onClick={() => { this.topTypeOnChange(1) }}>
          <div className="toptypeItemText borderRight">{i18n.get('排名前十')}</div>
        </div>
        <div className={"toptypeItem flex-g-1" + (toptype === 2 ? ' select' : '')} onClick={() => { this.topTypeOnChange(2) }}>
          <div className="toptypeItemText borderRight">{i18n.get('排名末十')}</div>
        </div>
        <div className={"toptypeItem flex-g-1" + (toptype === 3 ? ' select' : '')} onClick={() => { this.topTypeOnChange(3) }}>
          <div className="toptypeItemText">{i18n.get('全部排名')}</div>
        </div>
      </div>
      <div className="flex-g-1 scroll-absolute">
        <InfiniteScroll
          pageStart={0}
          useWindow={false}
          loadMore={this.loadMore}
          hasMore={hasMore}
          threshold={50}
        >
          <TableBox heads={heads} >
            {data.map((item, index) => (
              <tr key={item.ShopId}>
                <td>{item.ShopName}</td>
                <td>{item.SumMatch}</td>
                <td>{item.maxName}/{item.maxMatch}</td>
                <td>{item.minName}/{item.minMatch}</td>
              </tr>
            ))}
          </TableBox>
        </InfiniteScroll>
      </div>
    </div>
  }
}

export default StoreAnalysis;